7 3subs Drop Down Menu Posted by zendersto | at Friday, June 12, 2009

Menu-The most important element for every blog/web.But to make it appropriate with your site is very hard unless you are quite good at design.But for bloggers who don't know much about designing, they still have the great menu style for their blog.Therefore, this post is published.

This is the combination of horizontal and vertical menu style.It has 3 subs so this menu will be the best choice for blogs which are having many categories,labels.Specially, this is the Jquery menu,too!Like I have introduced you the tips about the Jquery menus(you can view them again here or here)but they just have 1 sub level.So some people

complained to me that those menus don't have enough subs to put all the labels!

If you want to know how it looks, I have a beautiful demo for this menu.

• View live demo


• Download files

Before you start,click on the button above to download the js file.

1.Now visit your source template, add this css code before the
]]></b:skin> tag:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}


2.Add this code before the </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://yourhost.menu.js"></script>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

Upload the menu.js file to your favorite host(110mb.com,hotlinkfiles.com...)
then paste the link instead of the red code.

3.Save all then create a HTML/Javscript, add this code:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.zenplate.blogspot.com">Zenplate</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://zenplate.blogspot.com">Make This Menu</a></li>
<li><a href="http://twitter.com/zendersto">Twitter</a></li>
</ul>
<br style="clear: left"/>
</div>

Done!Now Save it and join.i hope you will like this.If you have any problem please leave me a comment below and do me a back link.Subscribe my Feed now to get the next cool tips!

Requirements: Jquery
Convert to blogger : Zenplate

2 Create 1 sub " Drop down menu" using Jquery(next version) Posted by vuluganck | at Sunday, May 17, 2009

Hi everyone, today I will show you the basic ,simple dropdown menu using Jquery, it is a lightweight so don't worry about loading slowdown on your site.
This menu is from visitmix.com and I have converted it to work on blogspot.

Next to here is the screen shot of its look.
Its advantage is you can move the menu bar to anywhere you want but there are just 3 tabs have subnav.So if you want to create more you have to know a little about Jquery to make more.

Now let's do it now :
1.The 1st thing you have to do is adding this script to your source code , before the </head> tag:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>


2.Next , you have to add this CSS code before the ]]></b:skin> tag:

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:40px;
background-color:#e5e5e5;
}

#main_navigation
{ margin: 0;
padding: 0;
position:absolute;}

#main_navigation li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#main_navigation li a
{ display: block;
background: #ccc;
background-image:url('images/dropdown_bg.jpg');
background-repeat:repeat-x;
padding: 5px 10px 5px 10px;
text-decoration: none;
border-right: 1px solid white;
width: auto;
color: #333;
white-space: nowrap}

#main_navigation li a:hover
{ background: #999;}

#main_navigation li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#main_navigation li ul li
{ float: none;
display: inline}

#main_navigation li ul li a
{ width: auto;
background: #fff;}

#main_navigation li ul li a:hover
{ background: #999;}

Note:If you have any problem while this step is being added, please put all the CSS code above between 2 meta tag (if you does not have any problem please skip this), it looks like this :
<style type="text/css">
...CSS code here...
</style>

The red code:Option it by your own style.
3.Next , you have to add this function jquery code before the </head> tag again:

<script type="text/javascript">
jQuery(function($) {
var timer;
function OnMouseHover0(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav0").css("visibility","visible");
}

function OnMouseOut0(event)
{
$("#subNav0").css("visibility","hidden");
}

function OnMouseHover1(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav1").css("visibility","visible");
}

function OnMouseOut1(event)
{
$("#subNav1").css("visibility","hidden");
}

function OnMouseHover2(event)
{
$("#main_navigation li ul").css("visibility","hidden");
$("#subNav2").css("visibility","visible");
}

function OnMouseOut2(event)
{
$("#subNav2").css("visibility","hidden");
}

$('#trigger0').bind('mouseover', OnMouseHover0);

$('#trigger0').bind('mouseout', OnMouseOut0);

$('#trigger1').bind('mouseover', OnMouseHover1);

$('#trigger1').bind('mouseout', OnMouseOut1);

$('#trigger2').bind('mouseover', OnMouseHover2);

$('#trigger2').bind('mouseout', OnMouseOut2);

});
</script>

Note(you don't have to do this): At this step , you can copy all the function jquery code then put it in a js file then upload it to your host to prevent the memory for your blog.If you do this , you have to put the js file that you have uploaded and got the direct link in this meta form:

<script src='http://yourjsfile direct URL here' type='text/javascript'/>

And add it before the </head> tag ( just like above right?).

4.Final step, create a HTML/Javascript then copy/paste all the code here:

<ul id="main_navigation">
<li id="trigger0"><a href="#">Tab1</a>
<ul id="subNav0" class="subNavMenuItems">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
</ul>
</li>
<li id="trigger1"><a href="#">Tab2</a>
<ul id="subNav1" class="subNavMenuItems">
<li><a href="#">Edit 1</a></li>
<li><a href="#">Edit 2</a></li>
<li><a href="#">Edit 3</a></li>
<li><a href="#">Edit 4</a></li>
<li><a href="#">Edit 5</a></li>
<li><a href="#">Edit 6</a></li>
</ul>
</li>
<li id="trigger2"><a href="http://zenplate.blogspot.com">About Zenplate</a>
<ul id="subNav2" class="subNavMenuItems">
<li><a href="http://zenplate.blogspot.com/2008/12/about-me.html">About Zen</a></li>
<li><a href="http://twitter.com/zendersto">Zen's Twitter</a></li>
<li><a href="http://zenplate.blogspot.com">Zenplate</a></li>
<li><a href="http://zenplate.blogspot.com">Need for help</a></li>
</ul>
</li>
</ul>

Note: At this step you can option your links, your labels, anything you want here.If you know a little bit about Jquery, you can make more subnav for this type of menu.Hope you like it and it will run good on your blog.
Please leave me a comment if you are in trouble.


Requirements:Jquery
Website :http://visitmix.com/Lab/glimmer
Developer :The MIX Online Team
Convert to blogger : Zenplate

15 Create 1 sub "Drop down menu" using Jquery Posted by vuluganck | at Thursday, May 07, 2009

Drop Down Menu- the words are quite familiar to blogger , this bar is very necessary on each blog to contain the labels.Beside, it makes your blog looks professional.Because of its importance , I decided to make the first tip about drop down menu bar.

This is the simple menu bar, so you just have to add some codes to your source code,its advantages are you can change the color and move it to anywhere on your blog.

• View live demo


• Download

-To make it , simple log in your blogger account , then go straight to Edit HTML (No check Expand Widget Templates).
-Next add this code before the </head> tag:

<!--jquery-DD-Menu-Starts-->

/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}



<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="Jmenu.js URL" type="text/javascript"></script>
<!--jquery-DD-Menu-Stops-http://zenplate.blogspot.com-->

-Look for the red code above , that is the color code for this menu bar that I have already set it to green, in case you would like to change the color, please click here to get whole color code.
-And the pink code is the link of the js file you have to download above,upload it to your favorite host,I use 110mb.com here.
-Now Save your template, then lets go out to Layout then create a HTML/JavaScript , paste this code in here:

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://zenplate.blogspot.com">Blogger Help</a></li>
</ul>

Done! Join it now, If you have any problem please leave me a comment below , thanks guys and don't forget to subscribe me, thanks much.
Zen


Requirements:Jquery
Convert to blogger : Zenplate